import React, { useState } from 'react';
import { getMenuApi } from "../apis/users";
import {MenuFoldOutlined,MenuUnfoldOutlined,UserOutlined ,KeyOutlined,LogoutOutlined,SettingOutlined} from '@ant-design/icons';
import { Layout, Menu, theme , Breadcrumb,Dropdown, message} from 'antd';
import {useNavigate,useLocation,Outlet, Link} from 'react-router-dom'
// import { sideMenus } from '../configs/sideMenus';
import { filterAuth } from '../utils/global';
import { breadcrumbObj } from '../configs/breadcrumb';
const { Header, Sider, Content,Footer } = Layout;
// const sideMenus = hqMenus();
const App = () => {
  const items = [
    {
        key: '1',
        label:(
            <span onClick={goPage}>个人中心</span>
            ),
        icon: <UserOutlined />,
      },
      {
        key: '2',
        label: '密码修改',
        icon: <KeyOutlined />,
      },
      {
        key: '3',
        label: '系统定制',
        icon: <SettingOutlined />,
      },
      {
        key: '4',
        label:(
          <span onClick={delToken}>退出登录</span>
          ),
        icon: <LogoutOutlined />,
      },
]
  const [collapsed, setCollapsed] = useState(false);
  const userInfo = JSON.parse(localStorage.user);
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const navigate = useNavigate();
  const location = useLocation();
  // console.log("123",breadcrumbObj[location.pathname]);
  const [bread, setBread] = useState([]);
  // console.log("222",bread);
  function clickMenu(params){
    const [path,titleKey] = params.keyPath;
    setBread(breadcrumbObj[path])
    navigate(path);
    if(titleKey){
        sessionStorage.titleKey = titleKey;
    }else{
        sessionStorage.removeItem("titleKey")
    }
  }
  function goPage(e){;
    const text = e.target.textContent
    switch(text){
        case '个人中心':
           
            navigate('profile');
            break;
    }
  }
  function delToken(){
    localStorage.clear();
    message.success("退出成功")
    navigate("/login", { replace: true })
  }
  const token = localStorage.token;
  if (!token) {
    //没有登录，则跳转到登录页面
    // navigate("/login")
    window.location.hash = "#/login";
    // window.location.reload();//刷新
    return null;
  } 
  function handleMenus(menus) {
    return menus.map(item => {
      const o = {
        title: item.name,
        label: item.name,
        key: "/nav"+item.path
      }
      if (item.children) {
        o.children = handleMenus(item.children);
      }
      if (item.icon) {
        o.icon = <i className={'iconfont icon-' + item.icon} />
      }
      return o;
    })
  }
  const [sideMenus,setSideMenus] = React.useState([]);
    // console.log(userInfo);
    React.useEffect(()=>{
        getMenuApi().then(res => {
            console.log(res[0].children);
            setSideMenus(handleMenus(res[0].children));
        })
    },[]);
  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Sider  style={{backgroundColor:"#393e46"}} width={280} trigger={null} collapsible collapsed={collapsed} >
        <div style={{padding:'20px 0 10px 20px'}}>
            <img style={{width:'32px',marginRight:'20px'}} src="http://xawn.f3322.net:8002/distremote/static/img/logo.png" alt="" />
            <span style={{color:'white',fontSize:'22px',fontWeight:'bold'}}>赤兔养车</span>
        </div>
        <Menu
          mode="inline"
          selectedKeys={[location.pathname]}
          defaultOpenKeys={[sessionStorage.titleKey]}
          style={{
              height: '100%',
              borderRight: 0,
              backgroundColor:"#393e46",
              color:"#fff"
          }}
          onClick={clickMenu}
          items={filterAuth(sideMenus)}
        />
      </Sider>
      <Layout className="site-layout">
      <Header style={{padding: '0 20px',background: colorBgContainer,display:'flex',justifyContent:'space-between',alignItems:'center'}}>
          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: () => setCollapsed(!collapsed),
          })}
          <Dropdown menu={{items}} >
            <div style={{display:'flex',alignItems:'center'}}>
                <img src={'http://xawn.f3322.net:8002/distremote/static/avatar/'+userInfo.avatar} style={{width:'40px',height:'40px',borderRadius:'50%',marginRight:'15px'}} alt="" />
                <span style={{color:'#595959'}}>{userInfo.username}</span>
            </div>
          </Dropdown>
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
          }}
        >
          <Breadcrumb>
          {
            bread.map(item=>{
              return <Breadcrumb.Item key={item.title}><Link to={item.link}>{item.title}</Link></Breadcrumb.Item>
            })
          }
          </Breadcrumb>
          <Outlet/>
        </Content>
        <Footer style={{ textAlign: 'center' }}>Copyright©2022 <span style={{color:"blue"}}>admin</span></Footer>
      </Layout>
    </Layout>
  );
};
export default App;